Frame vs Group in Figma

In Figma, Frames and Groups are both used to organize multiple layers and treat them as a single unit. However, they work differently. A Group is mainly used to combine objects so they can be moved and managed together, while a Frame is a true container with its own dimensions, properties, layout behavior, constraints, Auto Layout, clipping, and prototyping capabilities.

For complete Figma learning, explore JustAcademy Figma Training and Register for Figma Course Demo.

1. What is a Group in Figma?

A Group is a collection of layers combined together so they can be selected, moved, duplicated, or managed as one unit. Groups are useful when several objects need to maintain a relationship with each other without requiring a dedicated container with its own layout properties.

For example, suppose a logo contains a circle, an icon, and a text label. You can group these objects so that they can be moved together as one manageable layer.

Example

Logo

├── Circle
├── Icon
└── Company Name
        ↓
      GROUP
        ↓
   Logo moves together

2. What is a Frame in Figma?

A Frame is a container layer used to organize and control other layers. Unlike a Group, a Frame has its own width and height and can provide layout behavior for its child objects.

Frames are commonly used for complete screens, mobile applications, website layouts, cards, buttons, navigation bars, forms, components, sections of an interface, and other structured UI elements.

Example

Mobile Screen Frame

├── Header Frame
│   ├── Logo
│   └── Menu Icon
├── Content Frame
│   ├── Image
│   ├── Heading
│   └── Description
└── Bottom Navigation Frame
    ├── Home
    ├── Search
    └── Profile

3. Frame vs Group at a Glance

4. Creating a Group

To create a Group, first select two or more layers and then group them.

Steps

1. Select multiple objects on the canvas or in the Layers panel.
2. Right-click the selected objects.
3. Select Group selection.
4. The selected layers become children of a Group.

Keyboard Shortcut

Mac:

Command + G
Windows:
Ctrl + G

Example

Before Grouping:

Circle
Rectangle
Text
After Grouping:
Group
├── Circle
├── Rectangle
└── Text

5. Creating a Frame

You can create a Frame using the Frame Tool or convert selected objects into a Frame.

Method 1: Frame Tool

1. Select the Frame Tool.
2. Use the shortcut F.
3. Click and drag on the canvas.
4. Set the required width and height.
5. Add objects inside the Frame.

Method 2: Frame Selection

You can select existing objects and place them inside a new Frame.

Mac:

Option + Command + G
Windows:
Ctrl + Alt + G

Example

Selected Objects

├── Image
├── Heading
└── Button
        ↓
Frame
├── Image
├── Heading
└── Button

6. Main Difference: Bounds

One of the most important differences between Groups and Frames is how their boundaries behave.

Group Bounds

A Group's bounds are based on the combined bounds of its child objects. If you move or resize objects inside the Group, the Group's overall bounds can change accordingly.

Group

┌─────────────────────┐
│  Object 1           │
│           Object 2  │
└─────────────────────┘
Move Object 2 outward
Group
┌──────────────────────────────┐
│  Object 1                    │
│                    Object 2 │
└──────────────────────────────┘
Group bounds adapt to children.

Frame Bounds

A Frame has its own dimensions. Moving or repositioning child objects does not automatically redefine the Frame's size in the same way a Group's bounds follow its children.

Frame

┌──────────────────────────┐
│                          │
│   Object                 │
│                          │
└──────────────────────────┘
        400 × 300
Child moves inside Frame
Frame remains:
        400 × 300

7. Frame Dimensions

A Frame can have independently controlled width and height. You can enter exact values in the right sidebar.

Frame

Width  = 390 px
Height = 844 px

This makes Frames especially useful for mobile and web screen designs where the canvas needs to represent a specific viewport size.

8. Groups and Scaling

Groups are useful when several objects need to behave as a combined visual object. When a Group is resized, its children generally scale together according to the normal group resizing behavior.

For example, a logo made from several shapes can be grouped when the complete logo needs to remain together.

Logo Group

├── Circle
├── Symbol
└── Text
Resize Logo Group
        ↓
All logo elements
remain visually together

If you need to scale an object and its properties such as strokes, effects, and type sizes proportionally, the Scale Tool can be useful.

9. Frames and Resizing

Frames separate the size of the container from the size and position of its child layers. This makes Frames useful for creating layouts that need controlled resizing.

Frame: 1440 × 900

┌─────────────────────────────────┐
│ Header                          │
├─────────────────────────────────┤
│                                 │
│ Content                         │
│                                 │
├─────────────────────────────────┤
│ Footer                          │
└─────────────────────────────────┘

The Frame can be resized while its children follow configured layout rules and constraints.

10. Constraints in Frames

Constraints define how child objects respond when their parent Frame changes size.

Common Constraint Examples

• Left
• Right
• Top
• Bottom
• Left and Right
• Top and Bottom
• Center
• Scale

Example

Frame

┌────────────────────────────┐
│ Logo                       │
│                            │
│          Content           │
│                            │
│                       Btn  │
└────────────────────────────┘
If Frame becomes wider:
Logo → stays attached according to its constraint
Button → can remain attached to the right
Content → can respond according to its constraints

Groups do not provide the same parent-frame constraint system for controlling child behavior.

11. Auto Layout and Frames

Auto Layout is one of the most important reasons to use Frames for UI design. Auto Layout allows a container to automatically respond when its content changes.

Auto Layout Shortcut

Shift + A

Example

Button Frame

┌─────────────────────┐
│      Buy Now        │
└─────────────────────┘
Text changes to:
Buy Now Premium
Auto Layout:
┌─────────────────────────────┐
│      Buy Now Premium        │
└─────────────────────────────┘
Container adjusts automatically.

This behavior is especially useful for buttons, cards, menus, forms, lists, navigation bars, and responsive components.

12. Clip Content

Frames can control whether content extending outside their boundaries should remain visible.

Clip Content Enabled

Frame

┌──────────────────────┐
│       Image          │
│    ┌───────────┐     │
│    │           │     │
└────┴───────────┴─────┘
Content outside Frame is hidden.

Clip Content Disabled

Frame

┌──────────────────────┐
│       Image          │
│    ┌─────────────┐   │
└────┴─────────────┴───┘
          ↑
   Overflow remains visible

This is useful for image cards, carousels, sliders, banners, and prototype scrolling areas.

13. Layout Grids

Frames can use layout guides and grids to structure a design. This makes Frames useful for website and application layouts where consistent columns, rows, and spacing are required.

Desktop Frame

┌────────────────────────────────────────┐
│ |    |    |    |    |    |    |    | │
│ |    |    |    |    |    |    |    | │
│ |    |    |    |    |    |    |    | │
└────────────────────────────────────────┘
       Layout Grid / Columns

Groups do not provide the same frame-specific layout grid functionality.

14. Prototyping with Frames

Frames are fundamental to Figma prototyping because screens and interactive areas can be represented as Frames.

Login Frame

     ↓
Click Login Button
     ↓
Dashboard Frame
     ↓
Click Profile
     ↓
Profile Frame

This structure makes it easier to create multi-screen application and website prototypes.

15. Parent and Child Relationship

A Frame can act as a parent object. Objects placed inside it become child layers.

Parent Frame

│
├── Child Text
├── Child Image
├── Child Button
└── Child Frame
    ├── Icon
    └── Label

Frames can also be nested inside other Frames. This allows complex interfaces to be built from smaller containers.

16. Nested Frames

Nested Frames are Frames placed inside another Frame. They are useful for creating structured UI hierarchies.

Mobile App Frame

├── Header Frame
│   ├── Logo
│   └── Menu
├── Product Frame
│   ├── Product Image
│   ├── Product Name
│   └── Price
└── Bottom Navigation Frame
    ├── Home
    ├── Cart
    └── Profile

A nested Frame can itself become a parent of other layers.

17. Frame Presets

Figma provides Frame presets for common device and design sizes. These can be useful when starting mobile, tablet, desktop, presentation, social media, and other designs.

Common Preset Categories

• Phone
• Tablet
• Desktop
• Presentation
• Watch
• Paper
• Social Media
• Figma Community
• Archive

18. Group vs Frame: Practical Example

Example 1: Company Logo

Suppose a logo contains a circle, icon, and company name. If the purpose is simply to keep these objects together while moving them around the canvas, a Group can be useful.

Company Logo

└── Group
    ├── Circle
    ├── Icon
    └── Company Name

Example 2: Login Form

A login form normally needs controlled spacing, padding, alignment, responsive behavior, and potentially Auto Layout. A Frame is more appropriate.

Login Form Frame

├── Heading
├── Email Field
├── Password Field
├── Remember Me
└── Login Button

19. Group vs Frame for a Button

A simple button can contain text and an icon. While a Group can keep these objects together, a Frame is generally more useful when the button needs padding, background fill, corner radius, Auto Layout, and dynamic sizing.

Button Frame

┌──────────────────────────┐
│   Icon   Submit Order    │
└──────────────────────────┘
Properties:
Width → Auto / Fixed
Height → Auto / Fixed
Padding → Controlled
Gap → Controlled
Corner Radius → Controlled
Fill → Controlled

20. Group vs Frame for a Card

A card usually contains multiple layers and requires a defined boundary, background, padding, spacing, and responsive behavior. Therefore, a Frame is suitable for building cards.

Product Card Frame

┌────────────────────────────┐
│ Product Image              │
│                            │
│ Product Name               │
│ Product Description        │
│ ₹999                       │
│                            │
│ [ Add to Cart ]            │
└────────────────────────────┘

21. Group vs Frame for a Mobile Screen

A mobile screen should generally be represented using a Frame because it needs a defined viewport size and can contain nested Frames, Auto Layout, constraints, clipping, and prototype interactions.

Mobile Screen Frame

390 × 844
│
├── Status Bar
├── Header Frame
├── Content Frame
├── Product List Frame
└── Bottom Navigation Frame

22. When Should You Use a Group?

• When you simply want to move multiple objects together.
• When several objects form one visual object.
• When you want to simplify the Layers panel.
• When you want related shapes to remain together.
• When you do not need Auto Layout.
• When you do not need an independently sized container.
• When you do not need frame-specific constraints or clipping.

Good Group Examples

• Logo artwork
• Decorative illustrations
• Multiple vector shapes forming an icon
• Simple collection of related objects
• Artwork that should be moved as one unit

23. When Should You Use a Frame?

• When creating a complete screen.
• When building a website layout.
• When creating mobile application screens.
• When building reusable UI structures.
• When using Auto Layout.
• When using constraints.
• When controlling content overflow.
• When creating prototype screens.
• When using layout grids.
• When you need independent width and height.
• When building cards, buttons, forms, menus, and navigation bars.

24. Important Differences in Resizing

25. Group vs Frame in UI Design

26. Converting a Group into a Frame

If you initially created a Group but later need container features, you can select the layers and use Frame Selection to create a Frame around them.

Objects

   ↓
Group
   ↓
Need Auto Layout / Constraints / Clipping
   ↓
Frame Selection
   ↓
Frame
   ↓
Add layout properties

27. Removing a Group

To remove the Group container while keeping its child layers, select the Group and use the Ungroup command.

Group

├── Circle
├── Rectangle
└── Text
        ↓ Ungroup
Circle
Rectangle
Text

Shortcut

Mac:

Shift + Command + G
Windows:
Shift + Ctrl + G

28. Removing a Frame Container

If you no longer need the Frame container, you can remove the Frame while keeping the contained objects as separate layers.

Frame

├── Heading
├── Image
└── Button
        ↓ Remove Frame
Heading
Image
Button

29. Common Mistakes

Mistake 1: Using Groups for Complete Screens

Using a Group for an entire application screen can make layout management difficult because Groups do not provide the same frame-specific layout features.

Mistake 2: Avoiding Frames for Auto Layout

If a UI element needs dynamic spacing and resizing, use a Frame with Auto Layout.

Mistake 3: Using Groups for Responsive Layouts

Responsive UI structures generally benefit from Frames, constraints, and Auto Layout.

Mistake 4: Creating Too Many Unnecessary Groups

Do not create Groups simply because several layers are next to each other. Use a Group when you actually need the layers to behave as one visual collection.

Mistake 5: Confusing a Frame with a Section

A Frame is a design container that can contain and control layers. A Section is primarily used to organize regions of the canvas and collaboration or handoff content.

30. Best Practices

• Use Frames as the foundation for UI layouts.
• Use Groups for simple visual combinations.
• Use Auto Layout for dynamic components.
• Use constraints when child elements need controlled resizing behavior.
• Use meaningful names such as Header, LoginForm, ProductCard, and BottomNavigation.
• Use nested Frames to organize complex interfaces.
• Use Frame presets when designing for known device sizes.
• Use Clip Content when overflow should be hidden.
• Avoid unnecessary nesting.
• Keep the Layers panel organized and readable.
• Use Frames for components that require structured layout behavior.

31. Practical Project: Create a Login Screen

Let's create a simple login screen using Frames instead of relying only on Groups.

Step 1: Create Main Frame

Login Screen

Width  = 390px
Height = 844px

Step 2: Create Login Form Frame

Login Screen

└── Login Form Frame
    ├── Welcome Text
    ├── Email Field
    ├── Password Field
    ├── Forgot Password
    └── Login Button

Step 3: Apply Auto Layout

Select the Login Form Frame and apply Auto Layout using Shift + A.

Step 4: Configure Spacing

Direction: Vertical

Gap: 16px
Padding: 24px
Alignment: Center

Step 5: Create Button Frame

Login Button Frame

├── Login Icon
└── Login Text

Apply Auto Layout so the button can respond when the text or icon changes.

32. Practical Project: Product Card

Product Card Frame

│
├── Product Image Frame
│   └── Product Image
│
├── Product Information Frame
│   ├── Product Name
│   ├── Rating
│   ├── Price
│   └── Description
│
└── Action Frame
    └── Add to Cart Button

This structure makes the product card easier to maintain because each area can have its own layout behavior.

33. Practical Project: Website Header

Website Header Frame

│
├── Logo Frame
│   ├── Logo Icon
│   └── Brand Name
│
├── Navigation Frame
│   ├── Home
│   ├── About
│   ├── Services
│   └── Contact
│
└── Action Frame
    └── Sign Up Button

Frames and Auto Layout can be combined to control spacing between navigation items and the action button.

34. Decision Flow: Frame or Group?

Need to combine multiple objects?

            │
            ▼
          YES
            │
            ▼
Do you only need to move/manage them together?
            │
       ┌────┴────┐
      YES        NO
       │          │
       ▼          ▼
     GROUP      FRAME
                  │
                  ▼
       Need layout/control features?
                  │
                  ▼
        Auto Layout / Constraints
        Clipping / Grid / Prototype
                  │
                  ▼
                FRAME

35. Quick Comparison

36. Interview Questions

Q1. What is the main difference between a Frame and a Group in Figma?

A Group primarily combines layers so they can be managed as one object, while a Frame is a container with independent dimensions and additional layout capabilities.

Q2. Can a Frame contain another Frame?

Yes. Frames can be nested inside other Frames to create structured UI hierarchies.

Q3. What is the shortcut for creating a Group?

Command + G on Mac and Ctrl + G on Windows.

Q4. What is the shortcut for the Frame Tool?

The Frame Tool can be activated with F.

Q5. Why are Frames useful for responsive UI?

Frames provide independent dimensions and support features such as constraints and Auto Layout, which help control how child elements respond to layout changes.

Q6. Can Groups use Auto Layout?

Auto Layout is applied to Frames rather than ordinary Groups.

Q7. Which is better for a mobile screen: Frame or Group?

A Frame is generally used because a mobile screen needs a defined viewport and can require layout, constraints, clipping, and prototype behavior.

Q8. Which is useful for grouping a logo made from multiple shapes?

A Group can be appropriate when the purpose is simply to keep the logo elements together as one manageable visual object.

Q9. Can a Frame have its own fill and corner radius?

Yes. Frames can have properties such as fill, stroke, corner radius, effects, and dimensions.

Q10. What is the purpose of Clip Content?

Clip Content hides portions of child objects that extend outside the Frame's boundaries.

37. Interview Quick Revision

• Group: Combines layers for easier management.
• Frame: A structured container with independent dimensions.
• Group Shortcut: Command + G / Ctrl + G.
• Frame Tool: F.
• Frame Selection: Option + Command + G / Ctrl + Alt + G.
• Auto Layout: Shift + A.
• Groups: Useful for simple visual collections.
• Frames: Useful for UI layouts and containers.
• Constraints: Control child behavior when a Frame changes size.
• Clip Content: Controls overflow outside Frame boundaries.
• Nested Frames: Allow complex layouts to be structured into smaller containers.

38. Checklist

• Understand what a Group is.
• Understand what a Frame is.
• Know the difference between Group and Frame.
• Know how to create a Group.
• Know how to create a Frame.
• Understand Frame dimensions.
• Understand Group bounds.
• Understand Frame bounds.
• Understand constraints.
• Understand Auto Layout.
• Understand Clip Content.
• Understand nested Frames.
• Know when to use Groups.
• Know when to use Frames.
• Practice creating buttons and cards with Frames.
• Practice creating simple artwork with Groups.
• Build a complete screen using nested Frames.

39. Conclusion

Frames and Groups both help organize layers in Figma, but they serve different purposes. A Group is mainly useful when multiple objects need to be managed together as one visual collection. A Frame is a more powerful container that has its own dimensions and supports features such as Auto Layout, constraints, layout guides, clipping, nested layouts, and prototyping.

A simple rule to remember is: Use a Group when you mainly want to keep objects together; use a Frame when you are building a structured UI container or layout.

To continue learning Figma from fundamentals to advanced UI/UX workflows, visit JustAcademy Figma Training and Register for Figma Course Demo.